<template>
  <div>
    <div v-if="!loaded">Loading</div>
    <div v-else>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="账户信息">
          <div style="margin-top: 20px"></div>
          <a-form :model="walletDetail.wallet" :style="{ width: '600px' }">
            <a-form-item tooltip="用户ID不能修改,全局唯一" label="用户ID">
              {{ walletDetail.wallet.userId }}
            </a-form-item>
            <a-form-item label="状态">
              <span v-if="walletDetail.wallet.status === 1">正常</span>
              <span v-else-if="walletDetail.wallet.status === 2">只存</span>
              <span v-else-if="walletDetail.wallet.status === 3">只出</span>
              <span v-else-if="walletDetail.wallet.status === -1">冻结</span>
            </a-form-item>
            <a-form-item tooltip="实名认证用户名" label="用户名">
              <a-input v-model="walletDetail.wallet.userName" placeholder="please enter your username..." disabled />
            </a-form-item>
            <a-form-item tooltip="目前只有费用账户、利润账户" label="账户类型"> <span v-if="walletDetail.wallet.type === 'amb-cost-cny'">成本账户</span> <span v-else-if="walletDetail.wallet.type === 'amb-profit-cny'">利润账户</span> </a-form-item>
            <a-form-item tooltip="是否允许提现" label="可提现?">
              <span v-if="walletDetail.wallet.withdrawable === true">是</span>
              <span v-else-if="walletDetail.wallet.withdrawable === false">否</span>
            </a-form-item>
            <a-form-item label="可用余额">
              {{ walletDetail.wallet.availabeBalance.toFixed(2) }}
            </a-form-item>
            <a-form-item label="冻结余额">
              {{ walletDetail.wallet.freezeBalance.toFixed(2) }}
            </a-form-item>
            <a-form-item label="透支余额">
              {{ walletDetail.wallet.creditLimit.toFixed(2) }}
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" :title="'收支流水(' + walletDetail.wallet.itemIndex + '笔)'">
          <a-table :columns="walletDetail.itemColumns" :data="walletDetail.items">
            <template #ioType="{ record }">
              <span v-if="record.ioType === 1">收入</span>
              <span v-else-if="record.ioType === -1">支出</span>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" title="存入" v-if="depositable">
          <div style="margin-top: 20px"></div>
          <a-form :model="walletDetail.wallet" :style="{ width: '600px' }">
            <a-form-item label="余额">
              {{ walletDetail.wallet.availabeBalance.toFixed(2) }}
            </a-form-item>
            <a-form-item tooltip="存入金额" label="存入金额">
              <a-input-number v-model="walletDetail.deposit.amount" :style="{ width: '320px' }" placeholder="请输入金额" :min="0.01" :max="9999" />
            </a-form-item>
            <a-form-item label="备注">
              <a-input v-model="walletDetail.deposit.remarks" :style="{ width: '320px' }" placeholder="备注" />
            </a-form-item>
            <a-form-item>
              <a-button @click="onDepositSubmit(walletDetail)">确认存入</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="4" title="转账" v-if="transferable">
          <div style="margin-top: 20px"></div>
          <a-form :model="walletDetail.wallet" :style="{ width: '600px' }">
            <a-form-item label="转入用户ID">
              <a-input v-model="walletDetail.transfer.toUserId" :style="{ width: '320px' }" placeholder="转入用户ID，不存在则会自动开户" />
            </a-form-item>
            <a-form-item label="类型">
              <select v-model="walletDetail.transfer.walletType">
                <option value="amb-cost-cny">成本账户(不可提现)</option>
                <option value="amb-profit-cny">利润账户(可提现)</option>
              </select>
            </a-form-item>
            <a-form-item label="可用金额">
              {{ walletDetail.wallet.availabeBalance.toFixed(2) }}
            </a-form-item>
            <a-form-item tooltip="转账金额" label="转账金额">
              <a-input-number v-model="walletDetail.transfer.amount" :style="{ width: '320px' }" placeholder="请输入转账金额" :min="0.01" :max="9999" />
            </a-form-item>
            <a-form-item label="转账备注">
              <a-input v-model="walletDetail.transfer.remarks" :style="{ width: '320px' }" placeholder="备注" />
            </a-form-item>
            <a-form-item>
              <a-button @click="onManagerTransferSubmit(walletDetail)">确认转账</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="5" title="提现" v-if="walletDetail.wallet.withdrawable === true">
          <div style="margin-top: 20px"></div>
          <a-form :model="walletDetail.wallet" :style="{ width: '600px' }">
            <a-form-item label="余额">
              {{ walletDetail.wallet.availabeBalance.toFixed(2) }}
            </a-form-item>
            <a-form-item label="提现金额">
              <a-input-number v-model="walletDetail.withdrawForm.amount" :style="{ width: '320px' }" placeholder="请输入金额" :min="0.01" :max="9999" />
            </a-form-item>
            <a-form-item label="银行卡号">
              <a-input v-model="walletDetail.withdrawForm.bankAccountNumber" :style="{ width: '320px' }" />
            </a-form-item>
            <a-form-item label="银行户名">
              <a-input v-model="walletDetail.withdrawForm.bankAccountName" :style="{ width: '320px' }" />
            </a-form-item>
            <a-form-item label="提现备注">
              <a-input v-model="walletDetail.withdrawForm.remarks" :style="{ width: '320px' }" placeholder="备注" />
            </a-form-item>

            <a-form-item>
              <a-button @click="onWithdrawSubmit(walletDetail)">确认提现</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="6" :title="'提现记录(' + walletDetail.withdrawItems.length + ')'" v-if="walletDetail.wallet.withdrawable === true">
          <div style="margin-top: 20px"></div>
          <a-table :columns="walletDetail.withdrawItemsColumns" :data="walletDetail.withdrawItems">
            <template #status="{ record }">
              <span v-if="record.status === 1">已打款</span>
              <span v-else-if="record.status === -1">已退回</span>
              <span v-else-if="record.status === 2">提现中</span>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs></div
    >
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { managerFindAccountV2, walletFind, walletDeposit, managerFindAccountItem, managerTransfer, managerFindWithdrawItem, managerWithdraw, managerFindAccount } from '@/api/finance/wallet'
import { Message } from '@arco-design/web-vue'
let loaded: any = ref(false)
const props = defineProps({
  accountId: String,
  depositable: Boolean,
  transferable: Boolean,
})
let walletList: any = ref([])
let walletDetail: any = ref({
  visible: false,
  wallet: { availabeBalance: 0, freezeBalance: 0, creditLimit: 0 },
  deposit: { amount: 0 },
  transfer: { walletType: 'amb-profit-cny' },
  items: [],
  itemColumns: [
    {
      title: '序',
      dataIndex: 'itemIndex',
      width: 50,
    },
    {
      title: '类型',
      dataIndex: 'ioType',
      slotName: 'ioType',
      width: 60,
    },
    {
      title: '金额',
      dataIndex: 'amount',
      align: 'right',
      width: 150,
    },
    {
      title: '备注',
      dataIndex: 'bizRemarks',
    },
    {
      title: '操作员',
      dataIndex: 'optUserName',
      width: 80,
    },
    {
      title: '时间',
      dataIndex: 'gmtCreate',
      width: 250,
    },
  ],
  withdrawForm: {},
  withdrawItems: [],
  withdrawItemsColumns: [
    {
      title: '状态',
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: '提现金额',
      dataIndex: 'withdrawAmount',
      align: 'right',
    },
    {
      title: '提现备注',
      dataIndex: 'withdrawRemarks',
    },
    {
      title: '到账金额',
      dataIndex: 'paymentAmount',
      align: 'right',
    },
    {
      title: '到账备注',
      dataIndex: 'paymentRemarks',
    },
  ],
  withdrawProcessingItems: [],
})

const onManagerFindAccount = async () => {
  let rs = await managerFindAccount({ walletType: walletDetail.value.wallet.type, userIdList: [walletDetail.value.wallet.userId] })
  walletDetail.value.wallet.availabeBalance = rs?.data?.accountList?.[0].availabeBalance
  walletDetail.value.wallet.itemIndex = rs?.data?.accountList?.[0].itemIndex
  //alert(JSON.stringify(rs))
}

const onWithdrawSubmit = async (walletDetail: any) => {
  let rs = await managerWithdraw({ walletType: walletDetail.wallet.type, userId: walletDetail.wallet.userId, withdrawAmount: walletDetail.withdrawForm.amount, withdrawRemarks: walletDetail.withdrawForm.remarks, bankAccountName: walletDetail.withdrawForm.bankAccountName, bankAccountNumber: walletDetail.withdrawForm.bankAccountNumber })
  //alert(JSON.stringify(rs))
  let code: any = rs.code
  if (code === 'SUCCESS') {
    Message.success('提现成功')
  }
  walletDetail.withdrawForm.amount = 0
  walletDetail.withdrawForm.remarks = ''
  walletDetail.withdrawForm.bankAccountNumber = ''
  walletDetail.withdrawForm.bankAccountName = ''
  await onManagerFindAccount()
}

const onManagerTransferSubmit = async (walletDetail: any) => {
  let rs = await managerTransfer({ fromUserId: walletDetail.wallet.userId, fromWalletType: walletDetail.wallet.type, toAccountName: 'dependency_on_uid', toUserName: 'dependency_on_uid', toUserId: walletDetail.transfer.toUserId, toWalletType: walletDetail.transfer.walletType, autoCreateAccount: false, amount: walletDetail.transfer.amount, remarks: walletDetail.transfer.remarks })

  let code: any = rs.code
  if (code === 'SUCCESS') {
    Message.success('转账成功')
  }
}

const onShowWalletDetail = async (wallet: any) => {
  walletDetail.value.visible = true
  walletDetail.value.wallet = wallet
  let rs = await managerFindAccountItem({ currentPage: 1, pageSize: 100, accountId: wallet.id })
  walletDetail.value.items = rs?.data?.records || []
  walletDetail.value.items.forEach((item: any) => {
    item.amount = item.amount.toFixed(2)
  })

  rs = await managerFindWithdrawItem({ size: 100, accountId: wallet.id })
  walletDetail.value.withdrawItems = rs?.data?.recentlyList || []
  walletDetail.value.withdrawProcessingItems = rs?.data?.processingList || []

  walletDetail.value.withdrawItems.forEach((item: any) => {
    item.withdrawAmount = item.withdrawAmount.toFixed(2)
    item.paymentAmount = item.paymentAmount.toFixed(2)
  })
  //alert(JSON.stringify(rs))
}

const onDepositSubmit = async (walletDetail: any) => {
  if (walletDetail.deposit.amount <= 0) {
    Message.error('金额不正确')
    return
  }
  let rs = await walletDeposit({ userId: walletDetail.wallet.userId, userName: walletDetail.wallet.userName, walletType: walletDetail.wallet.type, remarks: walletDetail.deposit.remarks, amount: walletDetail.deposit.amount })
  Message.success('存入成功')
  walletDetail.deposit.amount = 0
  await onManagerFindAccount()
}
onMounted(async () => {
  //await load(props.accountId)
})
const load = async (accountId: any) => {
  loaded.value = false
  let rs = await managerFindAccountV2({ accountId: accountId })
  if (rs?.data) {
    walletDetail.value.wallet = rs?.data
  }
  await onShowWalletDetail(walletDetail.value.wallet)
  loaded.value = true
}
defineExpose({ load })
</script>

<style>
</style>